<template>
  <div class="dmHome" v-cloak>
    <ul class="navList">
      <li class="listItem" @click="openList('year')">
        <text class="text"  :class="[this.isActive('year')]">年度</text>
        <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('year')]">{{'\ue689'}}</text>
      </li>
      <li class="listItem" @click="openList('division')">
        <text class="text"  :class="[this.isActive('division')]">行政区划</text>
        <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('division')]">{{'\ue689'}}</text>
      </li>
      <li class="listItem" @click="openList('equipment')">
        <text class="text"  :class="[this.pIndexKey == 'equipment'?'openColor':'']">厂家设备</text>
        <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpenKey == 'equipment'?'open':'']">{{'\ue689'}}</text>
      </li>
      <li class="listItem special" @click="openList('energy')">
        <text class="text"  :class="[this.isActive('energy')]">用能供暖</text>
        <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('energy')]">{{'\ue689'}}</text>
      </li>
    </ul>
    <listCont></listCont>
    <listCont :is="currentTab" @closeList="closeList" keep-alive></listCont>
  </div>
</template>
<script>
import listCont from './listCont'
import year from './year'
import equipment from './equipment'
import energy from './energy'
import division from '@/components/formItems/adcd'
import { addIconFontSupport } from '@/config/iconConfig.js'
import { getCache } from '@/util/storageUtils'
import { CTCE_USER_INFO } from '@/config/storageTypes'
import store from '@/store/ehHome'
const dom = weex.requireModule('dom')

export default {
  name: 'ehHome',
  store,
  data () {
    return {
      pIndexKey:'',
      isOpenKey: '',
      currentTab: 'listCont'
    }
  },
  components:{
    listCont,
    year,
    equipment,
    energy,
    division
  },
  beforeCreate () {
    this.$notice.loading.show()
    this.$navigator.setLeftItem({
      text: '   ',
      fontSize: '40',
      fontWeight: 'bold'
    }, () => {
      this.$router.back()
    })
  },
  created () {
    addIconFontSupport(dom, "../../")
    getCache(CTCE_USER_INFO).then(res => {
      const user = JSON.parse(res)
      store.commit('changeUserAdcd', user.xzqhdm)
      store.commit('changeAdcd', user.xzqhdm)
      store.dispatch('getLedger', this)
    })
  },
  methods: {
    isActive (_c) {
      return this.pIndexKey === _c ?'openColor':''
    },
    isOpen (index) {
      return this.isOpenKey === index ?'open':''
    },
    openList (_key) {
      if(this.pIndexKey === _key || this.isOpenKey === _key) {
        this.pIndexKey = '';
        this.isOpenKey = '';
        this.currentTab = '';
      } else {
        this.pIndexKey = _key;
        this.isOpenKey = _key;
        this.currentTab = _key;
      }
    },
    closeList () {
      this.pIndexKey = '';
      this.isOpenKey = '';
      this.currentTab = '';
    }
  }
}
</script>
<style scoped>
.dmHome{
  width: 750px;
}
.navList{
  width: 750px;
  height: 93.7px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom-color: #eee;
  border-bottom-style: solid;
  border-bottom-width: 1px;
}
.listItem{
  width: 188.75px;
  height: 80px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.special{
  border-right-width: 0;
}
.text{
  font-size: 29.1px;
  font-family:PingFangSC-Regular;
  color:rgba(102,102,102,1);
}
.title{
  color: #fff;
  font-family:PingFangSC-Regular;
}
.bar-ic{
  font-size: 20px;
  color: rgba(102,102,102,1);
  transform: rotate(-90deg);
  padding-right: 8px;
}
.open{
  transform: rotate(90deg);
  color: rgba(62,175,252,1);
}
.openColor{
  color: rgba(62,175,252,1);
}
[v-cloak] {
  display: none;
}

</style>
